import { ClockCircleOutlined, MessageOutlined } from "@ant-design/icons";
import { Flex, Typography } from "antd";
import { formatNumberToWan } from "../Common/commonData";
import styles from "./ITHomeCard.module.css";
import { useUser } from "@/hook/useUser/useUser";
import ProxyImage from "../Common/ProxyImage/ProxyImage";
const { Text } = Typography;

export function ITHomeCard({ item = {}, style = {} }) {
  const { openInNewWindow, listDisplay } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  const isImageEnabled = listDisplay === 0 ? true : false;

  return (
    <Flex
      style={{
        backgroundColor: "white",
        boxShadow:
          "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
        borderRadius: "8px",
        overflow: "hidden",
        padding: 8,
        ...style,
      }}
      gap={16}>
      {/* Image section - responsive display */}
      {isImageEnabled && (
        <a href={item.url} target={target} key={item.url}>
          {
            <ProxyImage
              originalUrl={item.extra_content?.photo_url}
              style={{
                height: "108.9px",
                width: "185.9px",
                borderRadius: "4px",
                maxHeight: "160px",
                objectFit: "cover",
              }}
            />
          }
        </a>
      )}

      {/* Content section */}
      <Flex
        vertical
        justify="space-between"
        flex={1}
        style={{ padding: "12px 12px 12px 0" }}>
        {/* Title - responsive styling */}
        <a
          className={styles["title-link"]}
          href={item.url}
          target={target}
          style={{ textDecoration: "none", color: "inherit" }}>
          <h2 key={item.url} className={styles.title}>
            {item.title}
          </h2>
        </a>

        {/* Meta information */}
        <Flex gap={16} style={{ fontSize: "12px", color: "#666" }}>
          <Flex align="center" gap={4}>
            <ClockCircleOutlined style={{ marginRight: 4 }} />
            <Text type="secondary" style={{ fontSize: 12 }}>
              {item.extra_content?.created_at}
            </Text>
          </Flex>
          <Flex align="center" gap={4}>
            <MessageOutlined style={{ color: "#666", fontSize: 14 }} />
            <Text type="secondary" style={{ fontSize: 12 }}>
              {formatNumberToWan(item.extra_content?.comment_count)}
            </Text>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
}
